<template>
  <Dialog :title="title" :visible="visible" :reveal="reveal" :width="width" class="two-columns" @close="close">
    <!-- 退单 -->
    <div v-loading="loading">
      <UserInfo :info-id="customerData.customerId" />
      <div>
        <span style="width: 44%;display: inline-block;">订单编号： {{ customersData.dataCode }}</span>
        <span style="width: 43.5%;display: inline-block;">开单时间： {{ customersData.createdTime }}</span>
      </div>
      <div>
        <span style="width: 44%;display: inline-block;">开单人: {{ customersData.orderMan }}</span>
        <span style="width: 43.5%;display: inline-block;">订单状态： {{ customersData.orderStatus }}</span>
      </div>
      <ul>
        <li class="detailed">
          已选清单：
        </li>
        <li v-for="(item,i) of customersData.orderList" :key="i">
          <el-row style="width:5%">
            {{ i+1 }}
          </el-row>
          <el-row style="width:95%">
            <el-row type="flex">
              <el-col :span="22" class="product">
                <el-button class="bg" type="text">{{ item.productAttrib }}</el-button>
                <p style="margin:0px 10px;">{{ item.projectName }}</p>
                <el-button v-if="item.type==='套餐类'" class="bg" type="text" @click="seeDetails(item.projectId)">详情</el-button>
              </el-col>
              <el-col :span="1">{{ item.contentCount }}</el-col>
            </el-row>
            <el-row v-if="item.productAttrib!=='套餐类'&&item.productAttrib!=='充值'" class="grey">
              <span>规格：{{ item.specl }}</span>
              <span>单位：{{ item.unit }}</span>
              <span>使用次数：{{ item.usageCount }}</span>
            </el-row>
            <el-row class="price">
              <el-row type="flex">
                <el-col :span="10">
                  售价：￥{{ item.price }}
                </el-col>
                <el-col v-if="item.discountRate" style="padding-left: 20px;" :span="10">
                  折扣率：{{ item.discountRate }}%
                </el-col>
                <el-col v-if="item.discountRate" :span="10">
                  折后价：￥{{ item.discountPrice }}
                </el-col>
                <!-- <el-col :span="6">
                  退款方式：
                  <el-select v-model="values" placeholder="请选择" style="width:60%">
                    <dictionary-selector code="swan_front_jzlx" :value.sync="values" />
                  </el-select>
                </el-col> -->
              </el-row>
              <el-row v-if="title==='退单'&&item.productAttrib!=='套餐类'" style="margin-top:10px">
                <el-col :span="10">
                  退款方式：
                  <dictionary-selector style="width: 160px;" class="el-select-y" code="swan_financial_tkfs" :value.sync="item.refundType" @change="changePayment(item,i)" />
                </el-col>
                <el-col v-if="item.refundType!=='不退款'&&item.refundType" :span="6">
                  金额：
                  <el-input v-model="item.money" class="el-select-y" :disabled="item.refundType==='退部分款'?false:true" style="width:55%" @input="changeMoney(item.money,i)" />
                </el-col>
                <el-col v-if="item.refundType==='退部分款'&&item.type!=='充值'" :span="8">
                  退货数量：
                  <el-input-number v-model="item.amount" class="el-select-y" :min="1" :max="Number(item.contentCount)" label="描述文字" @change="handleChangeNum" />
                </el-col>
              </el-row>
            </el-row>
          </el-row>
        </li>
      </ul>
      <el-row>
        <el-col :offset="18" :span="7" class="pull-right">退款总额：￥{{ repaymentAmount }}</el-col>
        <!-- <el-col :offset="18" :span="6">优惠：-￥0.00</el-col> -->
        <el-col :offset="19" :span="7" class="pull-right">合计：<span class="span">￥{{ repaymentAmount }}</span></el-col>
      </el-row>
    </div>
    <!-- <div>
      <el-row type="flex">
        <el-col :span="4">可退余额</el-col>
        <el-col :span="20">
          <span>500.5元</span>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="4">退款金额</el-col>
        <el-col :span="20">
          <el-input style="width:70%" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="18" :span="6">总额：￥36.500</el-col>
        <el-col :offset="18" :span="6">优惠：-￥3.000</el-col>
        <el-col :offset="17" :span="7">合计：<span class="span">￥33.500</span></el-col>
      </el-row>
    </div> -->
    <el-row class="butl">
      <!-- <el-col :span="3" :offset="8"> -->
      <el-button class="submitButton" :disabled="loading" plain @click="submit">提交</el-button>
      <!-- </el-col> -->
      <!-- <el-col :span="3" :offset="2"> -->
      <el-button class="submitButtons" :disabled="loading" plain @click="close">关闭</el-button>
      <!-- </el-col> -->
    </el-row>
    <el-dialog width="40%" title="套餐详情" :visible.sync="innerVisible" append-to-body>
      <mealDetails :details-id="detailsId" />
    </el-dialog>
  </Dialog>
</template>

<script>
import Dialog from '@/components/Dialog';
import UserInfo from '@/components/UserInformation';
import { DictionarySelector } from "@rabbit.do/rabbit";
import mealDetails from "@/components/mealDetails";
export default {
  components: {
    Dialog,
    UserInfo,
    DictionarySelector,
    mealDetails,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '退单',
    },
    customerData: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      width: 65,
      reveal: false,
      options: [],
      customersData: {},
      detailsId: [],
      innerVisible: false,
      repaymentAmount: 0,
      loading: false,
    };
  },
  watch: {
    customerData: {
      handler(newObj) {
        this.fetchDetail(newObj.id);
      },
      deep: true,
    },
  },
  methods: {
    changeMoney(money, i) { // 当退部分款的时候输入框的操作
      this.repaymentAmount = 0;
      if (money === "") this.customersData.orderList[i].money = 1;
      this.customersData.orderList.forEach(item => {
        if (item.refundType === "不退款" || item.refundType === "") return false;
        if (item.refundType === "退全部款") {
          this.repaymentAmount += item.money;
        } else {
          this.repaymentAmount += Number(item.money) * Number(item.amount) * 100 / 100;
        }
      });
    },
    // totalAll() {

    // },
    async submit() {
      this.loading = true;
      this.$set(this.customersData, 'refundFormDetailDtos', this.customersData.orderList);
      this.$set(this.customersData, 'orderId', this.customerData.id);
      this.$set(this.customersData, 'businessType', '订单');
      this.$set(this.customersData, 'orderCode', this.customerData.dataCode);
      this.$set(this.customersData, 'repaymentAmount', this.repaymentAmount);
      this.$set(this.customersData, 'refundMoney', this.repaymentAmount);
      console.log(this.customersData, "456456");
      const res = await this.$api['doctor/consulting/refund'](this.customersData);
      if (res.code !== 200) return this.$message.error('退单失败！');
      this.$emit('chargeBack', false);
      this.loading = false;
    },
    changePayment(val, id) { // 切换退款方式时
      this.repaymentAmount = 0;
      console.log("88888");
      this.customersData.orderList.forEach(item => {
        console.log("88888", item.refundType);
        if (item.refundType === "") item.refundType = "不退款";
        if (item.refundType !== "" && item.refundType !== "不退款") {
          if (item.refundType !== "退全部款") {
            this.$set(item, 'amount', item.contentCount);
            this.$set(item, 'money', Number(item.discountPrice) * Number(item.amount) * 100 / 100);
            this.repaymentAmount += item.money;
          }
        }
      });
    },
    async seeDetails(id) { // 点击套餐的查看详情
      this.detailsId = id;
      this.innerVisible = true;
    },
    fetchDetail(id) { // 获取订单详情
      if (!id) return false;
      this.$api['doctor/consulting/orderDetail']({ id }).then(res => {
        if (res.code !== 200) return;
        this.customersData = res.data;
        this.customersData.orderList.forEach(item => {
          this.$set(item, 'amount', 1);
          this.$set(item, 'type', item.productAttrib);
          this.$set(item, 'untitled', item.projectId);
          this.$set(item, 'repaymentAmount', item.discountPrice);
          this.$set(item, 'refundType', '');
          this.$set(item, 'money', JSON.parse(JSON.stringify(item.discountPrice)));
          if (item.refundType === "") item.refundType = "不退款";
        });
      });
    },
    handleChangeNum(value) {
      this.repaymentAmount = 0;
      this.customersData.orderList.forEach(item => {
        if (item.refundType === "不退款" || item.refundType === "") return false;
        if (item.refundType === "退全部款") {
          this.repaymentAmount += item.money;
        } else {
          this.repaymentAmount += Number(item.discountPrice) * Number(item.amount) * 100 / 100;
          this.$set(item, 'money', Number(item.discountPrice) * Number(item.amount) * 100 / 100);
        }
      });
    },
    close() {
      this.$emit('chargeBack', false);
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import './order.scss';
.el-col-3 {
  .el-button {
    margin-top: 15px;
    width: 100%;
    height: 40px;
  }
}
.el-row,
span {
  line-height: 45px;
}
li {
  display: flex;
  margin-bottom: 15px;
}
.el-select-y /deep/.el-input__suffix{
  padding-bottom: 6px;
  margin-top: 7px;
}
.el-select-y /deep/.el-input__suffix{
  padding-bottom: 6px;
  margin-top: 7px;
}

.submitButton,.submitButtons{
  width: 186px !important;
  height: 30px !important;
  background: #0278DC;
  border-radius: 4px;
  border: none;
  color:#fff;
}
.submitButton,.submitButtons{
  width: 186px !important;
  height: 30px !important;
  background: #0278DC !important;
  border-radius: 4px !important;
  color:#fff !important;
}
.submitButton:hover{
  background: #4791d1 !important;
}
.submitButtons{
  background: #EFF3FB !important;
  color: #0278DC !important;
}
.submitButtons:hover{
  background: #46a6ff !important;
  color: #fff !important;
}
.butl{
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  .submitButton{
    // margin-right: 45px;
  }
  .submitButtons{
    // margin-left: 45px;
  }
}
.pull-right{
  text-align: right;
}
</style>
